<template>
  <view class="page">
    <uni-nav-bar
      title="使用规则"
      left-icon="left"
      showMenuButtonWidth
      statusBar
      backgroundColor="#fff"
      :border="false"
      color="#333"
      @clickLeft="$tools.back"
    />
    <view class="content">
      <view
        class="rule"
        v-for="(item, index) in rules"
        :key="index"
      >
        <view class="rule-title">{{ item.title }}</view>
        <view
          class="rule-desc"
          v-html="item.desc"
        ></view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: "CouponRule",
  data() {
    return {
      rules: [
        {
          title: "券有效期",
          desc: "2025-09-1700:00:00至2025-09-1823:59:59"
        },
        {
          title: "使用渠道",
          desc: "小程序、APP"
        },
        {
          title: "使用须知",
          desc: `1、该优惠券只在蜜雪冰城APP、小程序自取/外卖订单使用<br>
          2、该券仅适用于饮品及冰淇淋，不适用于周边商品<br>
          3、该优惠券领取后仅限周三当天可用<br>
          4、该优惠券不与其他优惠活动同享<br>
          5、该优惠券不找零、不兑现、不可转赠<br>
          6、该券不支持抵扣小程序外卖订单的打包费及配送费<br>
          7、优惠券到账后请在优惠券列表页点击“立即使用”查看附近可用门店。`
        },
        {
          title: "获取方式",
          desc: "发券渠道：平台<br>发券时间：2025-09-1722:41:11"
        }
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
page {
  background-color: #fff;
}

.page {
  width: 100%;
  height: 100vh;
  background-color: #fff;
}

.content {
  padding: $uni-spacing-row-xl;
  display: flex;
  flex-direction: column;
}

.rule {
  display: flex;
  flex-direction: column;
  padding: $uni-spacing-row-xl 0;
  border-bottom: 1px dashed $uni-border-color;

  &-title {
    font-size: $uni-font-size-lg;
    color: $uni-text-color;
    font-weight: 500;
    margin-bottom: $uni-spacing-row-base;
  }

  &-desc {
    font-size: $uni-font-size-sm;
    color: $uni-text-color-grey;
    line-height: 1.5;
  }
}
</style>
